<template>
	<view class="container">
		<view>
			<!-- 圆形图片选择区域（按钮+图片覆盖） -->
			<view class="circle-container" @click="chooseImage">
				<!-- 选择按钮（圆形） -->
				<view class="circle-btn" v-if="imageList.length === 0">
					<text class="btn-text">+</text>
				</view>

				<!-- 选中的图片（覆盖在按钮位置，圆形显示） -->
				<image v-if="imageList.length > 0" :src="imageList[0]" class="circle-image" mode="aspectFill"></image>
			</view>

			<!-- 预览按钮 -->
			<button type="default" @click="previewImage" v-if="imageList.length > 0" class="preview-btn">
				预览图片
			</button>
		</view>

		<button @click="getWeather">获取天气预报</button>

		<!-- 天气预报展示区域 -->
		<view class="weather-info" v-if="weatherData">
			<text>日期：{{weatherData.date}}</text>
			<text>星期：{{weatherData.week}}</text>
			<text>最高温：{{weatherData.high}}</text>
			<text>最低温：{{weatherData.low}}</text>
		</view>

		<!-- 网络下载图片显示区域 -->
		<image class="net-image" :src="netImageUrl" mode="widthFix" v-if="netImageUrl"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 只保留一张图片（覆盖效果）
				imageList: [],
				weatherData: null, // 存储天气预报数据
				netImageUrl: '', // 存储网络下载图片的本地路径
				isDownloading: false // 新增：防止重复下载（优化项）
			};
		},
		onLoad() {
			// 页面加载时执行网络图片下载
			this.downloadNetImage();
		},
		methods: {
			// 选择图片（每次选择新图片会替换旧图）
			chooseImage() {
				uni.chooseImage({
					count: 1, // 只选一张图片（保证覆盖效果）
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.imageList = res.tempFilePaths; // 直接替换图片列表
					},
					fail: (err) => {
						console.log('选择失败：', err);
						uni.showToast({
							title: '选择失败',
							icon: 'none'
						});
					}
				});
			},

			// 获取天气预报
			getWeather() {
				uni.request({
					url: 'http://t.weather.sojson.com/api/weather/city/101230501',
					method: 'GET',
					success: (res) => {
						const data = res.data;
						if (data.status === 200) {
							const tomorrow = data.data.forecast[1];
							this.weatherData = {
								date: tomorrow.date,
								week: tomorrow.week,
								high: tomorrow.high.replace('高温 ', ''),
								low: tomorrow.low.replace('低温 ', '')
							};
						} else {
							uni.showToast({
								title: '获取天气失败',
								icon: 'none',
							});
						}
					},
					fail: (err) => {
						console.log('获取天气失败：', err);
						uni.showToast({
							title: '网络请求失败',
							icon: 'none',
						});
					},
				});
			},

			// 预览图片
			previewImage() {
				uni.previewImage({
					current: this.imageList[0],
					urls: this.imageList,
					loop: true
				});
			},

			// 新增：网络图片下载方法（带进度监听）
			downloadNetImage() {
				// 优化：防止重复下载
				if (this.isDownloading) return;
				this.isDownloading = true;

				const imageUrl = 'https://picsum.photos/800/400';
				uni.downloadFile({
					url: imageUrl,
					// 监听下载进度
					onProgressUpdate: (res) => {
						// 优化日志：格式化字节数，更易读
						const written = this.formatFileSize(res.totalBytesWritten);
						const expected = this.formatFileSize(res.totalBytesExpectedToWrite);
						console.log(`下载进度：${res.progress}% | 已下载：${written} | 总大小：${expected}`);
					},
					success: (res) => {
						this.isDownloading = false; // 重置下载状态
						if (res.statusCode === 200) {
							// 下载成功，将临时路径赋值给图片显示
							this.netImageUrl = res.tempFilePath;
							console.log('图片下载成功，临时路径：', res.tempFilePath);
							uni.showToast({ title: '图片下载成功' });
						} else {
							console.error('图片下载失败，状态码：', res.statusCode);
							uni.showToast({ title: `下载失败（${res.statusCode}）`, icon: 'none' });
						}
					},
					fail: (err) => {
						this.isDownloading = false; // 重置下载状态
						console.log('图片下载失败：', err);
						uni.showToast({
							title: err.errMsg || '图片下载失败',
							icon: 'none'
						});
					}
				});
			},

			// 新增：辅助函数 - 格式化文件大小（B -> KB/MB）
			formatFileSize(bytes) {
				if (bytes < 1024) return `${bytes} B`;
				if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;
				return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
			}
		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 100rpx;
	}

	/* 圆形容器（控制点击区域和位置） */
	.circle-container {
		width: 200rpx;
		height: 200rpx;
		position: relative;
		/* 让图片和按钮重叠 */
		margin-bottom: 40rpx;
	}

	/* 圆形选择按钮（未选图片时显示） */
	.circle-btn {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		/* 圆形 */
		background-color: #007aff;
		/* 主题色 */
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx dashed #ffffff;
		/* 白色虚线边框 */
	}

	/* 按钮上的加号 */
	.btn-text {
		color: #ffffff;
		font-size: 60rpx;
		font-weight: bold;
		line-height: 1;
	}

	/* 选中的图片（圆形覆盖效果） */
	.circle-image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		/* 圆形图片 */
		border: 2rpx solid #eee;
		/* 细边框 */
		position: absolute;
		/* 覆盖在按钮位置 */
		top: 0;
		left: 0;
	}

	/* 预览按钮样式 */
	.preview-btn {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		border-radius: 30rpx;
		/* 圆角按钮 */
	}

	/* 天气预报样式 */
	.weather-info {
		width: 90%;
		max-width: 1000rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
		background-color: #f7f8fa;
		border-radius: 16rpx;
	}

	.weather-info text {
		margin: 10rpx 0;
		font-size: 28rpx;
		color: #333;
	}

	button {
		width: 80%;
		max-width: 500rpx;
		margin-top: 20rpx;
	}

	.net-image {
		width: 90%;
		max-width: 600rpx;
		margin-top: 40rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.text-area {
		margin: 40rpx 0;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>